<template>
  <div id="app">
    <div class="zixuan">
      <el-form :inline="true" :model="gupiaoForm" class="demo-form-inline" :rules="rules" ref="ruleForm" label-width="100px">
        <el-form-item label="股票代码" prop="bond_id">
          <el-input v-model="gupiaoForm.bond_id" placeholder="股票代码"></el-input>
        </el-form-item>
        <el-form-item label="股票名字" prop="name">
          <el-input v-model="gupiaoForm.name" placeholder="股票名字"></el-input>
        </el-form-item>
        <el-form-item label="剩余年限" prop="year">
          <el-input v-model="gupiaoForm.year" placeholder="剩余年限（26-07-05）"></el-input>
        </el-form-item>
        <el-form-item label="剩余规模" prop="money">
          <el-input v-model="gupiaoForm.money" placeholder="剩余规模(亿)"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="addGupiao">添加</el-button>
        </el-form-item>
      </el-form>
    </div>

    <el-table :data="filterGuPiaoList" style="width: 100%" row-key="bond_id" default-expand-all :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" :default-sort="{ prop: 'date', order: 'descending' }">
      <el-table-column prop="bond_id" label="代码"> </el-table-column>
      <el-table-column prop="name" label="名字"> </el-table-column>
      <el-table-column prop="price" label="现价/持仓价">
        <template slot-scope="scope"> {{ scope.row.flag ? scope.row.price : scope.row.price }} </template>
      </el-table-column>
      <el-table-column prop="increase_rt" label="涨跌幅" sortable>
        <template slot-scope="scope"> {{ scope.row.flag ? scope.row.increase_rt : scope.row.increase_rt + '%' }}</template>
      </el-table-column>
      <el-table-column prop="sprice" label="正股价"> </el-table-column>
      <el-table-column prop="sincrease_rt" label="正股涨跌">
        <template slot-scope="scope"> {{ scope.row.flag ? '' : scope.row.sincrease_rt + '%' }}</template>
      </el-table-column>
      <el-table-column prop="premium_rt" label="溢价率">
        <template slot-scope="scope"> {{ scope.row.flag ? '' : scope.row.premium_rt + '%' }}</template>
      </el-table-column>
      <el-table-column prop="dblow" label="双低"> </el-table-column>
      <el-table-column prop="year" label="剩余年限"> </el-table-column>
      <el-table-column prop="money" label="剩余规模(亿)"> </el-table-column>
      <el-table-column prop="ytm_rt" label="到期收益率">
        <template slot-scope="scope"> {{ scope.row.flag ? '' : scope.row.ytm_rt + '%' }}</template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="150">
        <template slot-scope="scope">
          <el-button @click="addChildren(scope.row)" type="primary" size="small" v-if="scope.row.flag ? false : true">新增</el-button>
          <el-button @click="updateChildren(scope.row)" type="success" size="small" v-if="scope.row.flag ? true : false">修改</el-button>
          <el-button @click="deleteGuPiao(scope.row)" type="danger" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <UpdateDia ref="UpdateDia" />
  </div>
</template>

<script>
// const ziXuanGuPiao = [
//   { bond_id: '113036', name: '宁建转债', year: '26-07-05', money: '5.092' },
//   {
//     bond_id: '123078',
//     name: '飞凯转债!',
//     year: '26-11-26',
//     money: '7.189',
//     children: [
//       {
//         bond_id: '1130261',
//         name: '自己',
//         price: '166',
//         flag: true
//       },
//       {
//         bond_id: '1130262',
//         name: '晨坨坨',
//         price: '155',
//         flag: true
//       },
//       {
//         bond_id: '1130263',
//         name: '方卓然',
//         price: '144',
//         flag: true
//       }
//     ]
//   }
// ]

import UpdateDia from './components/UpdateDia.vue'
import $hc from '../src/api/hc'
export default {
  name: 'App',
  components: { UpdateDia },
  data() {
    return {
      guPiaoList: [], //获取的所有可转债的信息
      gupiaoForm: {}, //每次新添加的
      filterGuPiaoList: JSON.parse(window.localStorage.getItem('filterGuPiaoList')) || [], //table填充的信息

      rules: {
        name: [{ required: true, message: '请输入', trigger: 'blur' }],
        bond_id: [{ required: true, message: '请输入', trigger: 'blur' }],
        year: [{ required: true, message: '请输入', trigger: 'blur' }],
        money: [{ required: true, message: '请输入', trigger: 'blur' }]
      }
    }
  },
  methods: {
    // 获取所有的股票
    async getlist() {
      const res = await $hc.getlist()
      // console.log(res)
      this.guPiaoList = res.data.data
      // console.log(this.filterGuPiaoList.length != 0)

      if (JSON.parse(window.localStorage.getItem('filterGuPiaoList'))) {
        this.filterGuPiao()
      }
    },
    addGupiao() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          // console.log(this.gupiaoForm)
          let zixuan = this.guPiaoList.filter((item) => item.bond_id == this.gupiaoForm.bond_id)
          // console.log(zixuan)
          if (zixuan.length == 0) {
            return this.$message.warning('请输入正确的股票代码')
          }
          zixuan[0].name = this.gupiaoForm.name
          zixuan[0].year = this.gupiaoForm.year
          zixuan[0].money = this.gupiaoForm.money
          zixuan[0].children = []
          this.filterGuPiaoList.push(zixuan[0])
          // console.log(this.filterGuPiaoList)
          window.localStorage.setItem('filterGuPiaoList', JSON.stringify(this.filterGuPiaoList))
          // this.filterGuPiao()
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 赛选自选股票-父级别
    filterGuPiao() {
      this.filterGuPiaoList = []
      //赛选子集，看有没持仓点位
      let copyFilterGuPiaoList = JSON.parse(window.localStorage.getItem('filterGuPiaoList'))
      // console.log(this.guPiaoList)
      // this.guPiaoList.forEach((item) => {})
      // console.log(copyFilterGuPiaoList)
      let a = []
      copyFilterGuPiaoList.forEach((item) => {
        this.guPiaoList.forEach((item1) => {
          if (item1.bond_id == item.bond_id) {
            item1.name = item.name
            item1.year = item.year
            item1.money = item.money
            // console.log(item.children)
            if (item.children && item.children.length != 0) {
              item.children.forEach((item) => {
                item.increase_rt = (((item1.price - item.price) / item.price) * 100).toFixed(2) + '%'
                // console.log(item)
              })
            }
            item1.children = item.children
            // console.log(item1, '每秒查询的数据')
            // console.log(item, '本地存储的数据')
            a.push(item1)
          }
        })
      })
      // console.log(a)
      this.filterGuPiaoList = a
    },
    // 新增孩子
    addChildren(row) {
      // console.log(row)
      this.$refs.UpdateDia.open('新增个人持仓点位', row)
    },
    // 修改孩子
    updateChildren(row) {
      // console.log(row)
      this.$refs.UpdateDia.open('修改个人持仓点位', row)
    },
    // 删除
    deleteGuPiao(row) {
      // console.log(row)
      this.$confirm('是否删除?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          if (row.flag) {
            // 删除的是孩子
            this.filterGuPiaoList.forEach((item, i) => {
              if (item.children) {
                item.children.forEach((item1, i1) => {
                  if (item1.bond_id == row.bond_id) {
                    // console.log(item1)
                    // console.log(this.filterGuPiaoList[i].children)
                    this.filterGuPiaoList[i].children.splice(i1, 1)
                    // console.log(this.filterGuPiaoList)
                    window.localStorage.setItem('filterGuPiaoList', JSON.stringify(this.filterGuPiaoList))
                  }
                })
              }
            })
          } else {
            // 删除的是父亲
            // console.log(row, '父亲')
            this.filterGuPiaoList.forEach((item, i) => {
              if (item.bond_id == row.bond_id) {
                this.filterGuPiaoList.splice(i, 1)
                // console.log(this.filterGuPiaoList)
                window.localStorage.setItem('filterGuPiaoList', JSON.stringify(this.filterGuPiaoList))
              }
            })
          }
          this.getlist()

          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch(() => {})
    },
    // 添加持仓点位
    childrenModify(row) {
      // console.log(row)
      // this.filterGuPiaoList[0].children = row.children
      let a = this.filterGuPiaoList.findIndex((item) => {
        return item.bond_id == row.bond_id
      })
      // console.log(a)
      // this.filterGuPiao()
      this.$set(this.filterGuPiaoList, a, row)
      window.localStorage.setItem('filterGuPiaoList', JSON.stringify(this.filterGuPiaoList))
    }
  },
  mounted() {
    // console.log(JSON.parse(window.localStorage.getItem('filterGuPiaoList')))
    this.getlist()
    let timer = null
    clearInterval(timer)

    timer = setInterval(() => {
      if (JSON.parse(window.localStorage.getItem('filterGuPiaoList'))) {
        this.getlist()
      }
    }, 2000)
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
